<template>
  <div id="contentBody" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">家庭及主要社会关系</h3>
        <div class="box-tools pull-right">
          <el-button  type="success" class="btn btn-success" v-if='isEditable' @click="addVisible = true">
            <i class='fa fa-plus-square-o'>添加社会关系</i>
          </el-button>
        </div>
      </div>
      <div class="box-body">
        <section class="content" id="departEmployees">
          <div class="row">
            <el-table stripe :empty-text="emptyText" :highlight-current-row='true' :data="relations" border style="width: 100%">
              <el-table-column type='index' label="序号" :width='80'></el-table-column>
              <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
              <el-table-column label="操作" width="320">
                <template scope="scope">
                    <el-button type="success" @click="view(scope.row)">
                      <i class="fa fa-eye">查看</i>
                    </el-button>
                    <el-button type="primary" v-if="isEditable" @click="editRow(scope.row)">
                      <i class="fa fa-edit">编辑</i>
                    </el-button>
                    <el-button type="warning" v-if="isEditable" @click="deleterow(scope.row)">
                      <i class="fa fa-trash">删除</i>
                    </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>

      <el-dialog title="新增社会关系" :visible.sync="addVisible" :modal="false" size="small">
        <socialForm v-if='addVisible' :editable='true' ref='addView'></socialForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">关 闭</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="查看社会关系" :visible.sync="viewVisible" :modal="false" size="small">
        <socialForm v-if='viewVisible' :social='editsocial' :editable='false' ref='ViewForm'></socialForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑社会关系" :visible.sync="editVisible" :modal="false" size="small">
        <socialForm v-if='editVisible' :social='editsocial' :editable='true' ref='editView'></socialForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">关 闭</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import Policy from "../../mycomponents/common/Policy"
import MyDatePicker from "../../mycomponents/common/MyDatePicker"
import Utils from "../../../common/utils"
import socialForm from "./socialForm"
let util = new Utils()
export default {
  name: "Social",
  props: ["relations", "editable"],
  data: function() {
    return {
      emptyText:'空',
      isEditable: false,
      editVisible: false,
      viewVisible:false,
      addVisible:false,
      editsocial: {
        title: "",
        name: "",
        birthday: "",
        policy: 1,
        company: "",
        position: "",
        workstatus: 1,
        system: "",
        comment: ""
      },
      workstatuses: [],
      columns: [
        {
          prop: "title",
          label: "称谓",
          sortable: true,
          width: "142",
          formatter: util.stringFormater
        },
        {
          prop: "name",
          label: "姓名",
          sortable: true,
          width: "101",
          formatter: util.stringFormater
        },
        {
          prop: "birthday",
          label: "出生年月",
          width: "101",
          sortable: true,
          formatter: util.dateFormater
        },
        {
          prop: "policy",
          label: "政治面貌",
          width: "101",
          sortable: true,
          formatter: this.getpolicyname
        },
        {
          prop: "company",
          label: "工作单位（就读学校）",
          width: "101",
          sortable: true,
          formatter: util.stringFormater
        },
        {
          prop: "position",
          label: "现任职务",
          width: "101",
          sortable: true,
          formatter: util.stringFormater
        },
        {
          prop: "workstatus",
          label: "目前状态",
          width: "101",
          sortable: true,
          formatter: this.getworkstatusname
        },
        {
          prop: "system",
          label: "所属系统",
          width: "101",
          sortable: true,
          formatter: util.stringFormater
        },
        {
          prop: "comment",
          label: "备注",
          width: "101",
          sortable: true,
          formatter: util.stringFormater
        }
      ]
    };
  },
  components: {
    Policy,
    MyDatePicker,
    socialForm
  },
  created() {
    if (this.editable != null) {
      this.isEditable = this.editable;
    }
    this.workstatuses = this.$store.state.sysconfigs.workstatuses;
  },
  methods: {
    getpolicyname: function(row) {
      console.log("getpolicyname")
      return util.getNameById(
        row.policy,
        this.$store.state.sysconfigs.politicalStatus
      );
    },
    getworkstatusname: function(row) {
      console.log("getworkstatusname")
      for (var index in this.workstatuses) {
        if (this.workstatuses[index].id == row.workstatus) {
          return this.workstatuses[index].name;
        }
      }
      return "";
    },
    getData() {
      return this.relations;
    },
    deleterow: function(row) {
      for (var index in this.relations) {
        if (this.relations[index].name == row.name) {
          this.relations.splice(index, 1)
        }
      }
    },
    view(row){
      this.editsocial = row
      this.viewVisible = true
    },
    editRow(row){
      this.editsocial = row
      this.editVisible = true
    },
    add(e) {
      var newsocial = this.$refs.addView.getData()
      this.relations.push(newsocial)
      this.addVisible = false
    },
    update(e){
      var newsocial = this.$refs.editView.getData()
      this.editsocial = newsocial
      this.editVisible = false
    }
  }
};
</script>

<style scoped>
#contentBody {
  min-height: 400px;
}
</style>